<template>
	<scroll-view class="sidebar" :scroll-y="true"
		:style="`width:${!eventFolds?210:70}px`"
	>
		<view>
			<view class="logo-element">
				<view class="logo">
					<text class="iconfont icon-quanjing"></text>
				</view>
				<view class="logo-text" v-if="!eventFolds" >
					易派到家
				</view>
			</view>
			<view class="enmu-element">
				<menu-item :data="menu" :menuId="currentMenuId" ></menu-item>
			</view>
		</view>
	</scroll-view>
	
</template>

<script>
	// import {staticMenu} from "/navconfig.js"  				staticMenu,
	export default {
		data() {
			return {
				menu:[],
				currentMenuId:[null,null,null],
				eventFolds:false,
			}
		},
		watch: {
			eventFold(e){
				this.eventFolds = e
			},
			onCurrentPage(e){
				this.currentPage()
			}
		},
		computed: {
			eventFold() { return this.$store.state.eventFold } ,
			onCurrentPage(){
				return this.$store.state.currentPage;
			}
		},
		created() {
			let res = uni.getStorageSync("menu-data") || null;
			if (res && typeof res === 'object' && res.time > Date.now()) {
				setTimeout(() => {
					this.menu = res.data;
					this.getMenu(true);
					this.currentPage() ;
				}, 500);
			} else {
				this.getMenu(false);
			}
		},
		methods: {
			getMenu(isStore=false) {
				let userInfo = uni.getStorageSync('uni-id-pages-userInfo');
				uniCloud.importObject("menu",{customUI:true}).getMenuTreeStructure(userInfo.role).then(result => {
					const data = result.result ;
					this.menu = data;
					let store = { data,time: Date.now() + 1000 * 60 * 60 * 1  };
					uni.setStorageSync("menu-data", store);
					if(!isStore){
						this.currentPage() ;
					}
				})
			},
			currentPage() {
				const path = this.$store.state.currentPage;
			    let data = this.menu;
			    /* 蓝斑.json 出品 */
			    const checkChildren = (children, parentMenuId, level) => {
			        for (let child of children) {
			            if (child.url === path) {
			                this.currentMenuId[level] = child.menu_id;
			                return true;
			            }
			            if (!child.url && child.children) {
			                if (checkChildren(child.children, child.menu_id, level + 1)) {
			                    this.currentMenuId[level] = child.menu_id;
			                    return true;
			                }
			            }
			        }
			        return false;
			    };
			    for (let i = 0; i < data.length; i++) {
			        if (checkChildren(data[i].children, null, 0)) {
			            return uni.$emit('currentMenuId', { currentMenuId: this.currentMenuId });
			        }
			    }
			}
		}
	}
</script>

<style lang="scss">
	.logo-element {
		display: flex;
		gap: 10px;
		padding: 15px 20px;
		align-items: center;
		font-weight: bold;
		.logo .iconfont {
			font-size: 25px;
			font-weight: 400;
		}

		.logo-text {
			letter-spacing: 2px;
		}
	}
	.sidebar {
		color:#fff;
		position: fixed;
		height: 100vh ;
		box-sizing: border-box;
		background-color: #1c2b36;
		padding-bottom: 10px;
		padding: 10px 0px;
		transition:.5s;
	}
	/* #ifdef H5 */
	.sidebar ::-webkit-scrollbar {
		scrollbar-width: thin;
		display: none
	}
	/* #endif */
</style>